<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>09html이미지</title>
	</head>
	<body bgcolor="yellow">
		<h1>이미지</h1>
		<img src="images/return_1994_01.jpg" alt="응답하라 1994" title="응답하라 1994"
		width="350px" height="250px" />
		<img src="images/return_1994_02.jpg" alt="응답하라 1994" title="응답하라 1994" />
		<img src="images/return_1994_03.jpg" alt="응답하라 1994" title="응답하라 1994" />
		<img src="images/return_1994_04.jpg" alt="응답하라 1994" title="응답하라 1994" />
		<img src="images/return_1994_05.jpg" alt="응답하라 1994" title="응답하라 1994" />
		<img src="images/return_1994_06.jpg" alt="응답하라 1994" title="응답하라 1994" />
		<hr />
		<p><img src="images/suji/suji01.jpeg" alt="수지사진" title="수지" align="left"/>
			수지 관상 이승기 관상
			수지 관상이 이승기와 함께 최고의 관상으로 꼽혀 화제다.
			11일 방송되는 케이블 TV 온스타일의 뷰티 프로그램 '겟 잇 뷰티'에서는 관상 전문가인 퀴니와 우현증 메이크업 아티스트가
			등장해 일명 '관상 메이크업'을 소개한다.
			이날 관상 전문가 퀴니는 가장 좋은 관상을 가진 연예인으로 이승기와 수지를 꼽았다.
			관상 전문가에 따르면 수지는 눈썹이 일직선인 듯 눈을 감사는 눈썹으로 안정적인 성품을 가지고 있으며,
			또한 넓고 둥근 수지의 하관은 건강과 자녀운까지 있는 관상이라고 분석했다.
			이어 이승기는 봉긋하고 윤기가 있는 복덕궁(눈썹 윗부분)은 평생 부와 명예를 불러일으키는 관상이라고 전했다.
			뿐만 아니라 혈색이 좋고 넓은 이마로 초년운과 윗사람 복이 좋은 운이며, 콧대가 반듯하고 코끝이 도톰해 재물복이 좋고,
			살짝 올라간 입 꼬리는 자신이 원하는 일을 쉽게 성취할 수 있는 관상으로 풀이했다.
			수지 관상 이승기 관상에 네티즌들은 "수지 관상 이승기 관상, 뭘 해도 되는 사람들이었구나"
			"수지 관상 이승기 관상 나도 수지처럼 예쁘고파"
			"수지 관상 이승기 관상, 관상이 정말 맞을까?"
			"수지 관상 이승기 관상, 이승기는 뭘 해도 되나봐" 등의 반응을 보였다.
		</p><br />
		<hr />
		<img src="images/suji/suji02.jpg" alt="수지사진" title="수지사진" width="350px" height="350px" />
		<figcaption>수지사진</figcaption>
		<hr />
		<figure><img src="images/movegif/movegif01.gif" />
			<figcaption>
				그림 24-98. 움직이는 그림
			</figcaption>
		</figure>
		<!--
			img : image(이미지)
			다양한 이유로 웹 페이지에 이미지를 추가
			로고, 사진, 삽화, 다이어그램, 차트 등을 사용
			CSS 를 이용해서 이미지 삽입가능(스프라이트)
			
			일반적으로 이미지 파일은 images 폴더에 저장
			
			img 태그로 이미지를 추가할 수 있음
			src 속성은 브라우저에게 이미지 위치를 알려줌
			alt 속성은 이미지를 볼 수 없는 경우 설명을 제고
			title 속성은 이미지에 대한 추가 정보 제공
			
			이미지의 크기는 height, width 속성으로 지정
			이미지 크기 단위는 픽셀px로 지정
			
			align 속성을 이용하면 페이지의 다른 요소를 이미지 주위에 정렬시킬 수 있음
			좌우 : left, right
			상하 : top, bottom
			
			figure 태그로 이미지와 캡션을 하나로 묶을 수 있음
			figcaption 태그로 이미지에 캡션을 추가할 수 있음
			html5에 새롭게 추가
			
			이미지는 jpeg, gif, png 형식을 사용 이미지의 크기대로 페이지에 표시
			올바른 해상도(72~96 dpi)를 사용할 것
			인쇄물은 150 ~ 300dpi 해상도를 사용
			
			jpeg : 다양한 색상으로 구성된 사진
			gif/png : 동일한 색상이 넓은 영역에 분포(로고등)
			
			애니메이션 GIF
			이미지를 프레임 단위로 연속해서 보여줌
			이를 이용해서 간단한 애니메이션을 만들 수 있음
			
			이미지 투명도
			웹에서 부분적으로 투명하거나 비치는 이미지는 투명 GIF나 반투명 PNG로 만들 수 있음
			
			간단한 이미지 작업용 도구
			photoshop CC(너무 무거움)
			paint.net (추천)
			pixlr.com (웹기반 - 간편함)
		-->
		<hr />
		<img src="images/icons/apple.jpg" />
		<img src="images/icons/apple2.png" />
		<figure>
			<img src="http://placehold.it/300x150" />
			<figcaption>의미없는 이미지</figcaption>
		</figure>
		<figure>
			<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
			<figcaption>외부이미지 가져와서 출력</figcaption>
		</figure>
		<figure>
			<img src="https://www.google.co.kr/images/srpr/logo11w.png" />
			<figcaption>외부이미지 가져와서 출력</figcaption>
		</figure>
	</body>
</html>